<template>
     <qh-page-view  :showNavbar="false" bgImageUrl="https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/661f878ab2ab09984.png">
          <!-- <view class="search-box">
               <view class="search-content flex-cn">   
                    <text class="qh-rt-single qh-rt-a-zu2432 search-icon"></text>
                    <input class="search-input" type="text" :focus="isFocus" v-model="searchForm.goods_name" placeholder="请输入商品名称" placeholder-class="pl" @confirm="searchData" />
                    <view class="search-btn flex-cn-cn" @click="searchData">搜索</view>
               </view>
          </view> -->
          <view class="fixed-header" :style="headerStyle">
               <uni-status-bar></uni-status-bar>
               <view class="search-box flex-cn">
                    <view
                    class="navbar-left flex-cn"
                    style="margin-right: 24rpx;margin-left: 24rpx;"
                    :style="styleColor"
                    @click="backHome"
                    >
                    <view class="qh-rt-single qh-rt-zuo-zuo navbar-back-icon"> </view>
                    </view>

                    <view class="search-content flex-cn" @click="toSearchGoods">
                    <text class="qh-rt-single qh-rt-a-zu2432 search-icon"></text>
                    <view class="search-input">请输入商品名称</view>
                    <!-- <view class="search-btn flex-cn-cn">搜索</view> -->
                    </view>
                    <view style="width: 60rpx;"></view>

               </view>
             
          </view>

          <qh-tabs ref="labelRef" style="position:static;top:10rpx; background-color: #fff;border-radius: 16rpx 16rpx 0" v-model="actLabelId" :list="labelList" keyField="id" actLineBreak itemActColor="#333333" :bottomLine="false" @change="searchGoods">
                              </qh-tabs>

   
          <view class="flex-column-100">
               <scroll-view scroll-y="true" @scroll="onScroll" class="scroll-view" :show-scrollbar="false" @scrolltolower="getGoodsList" refresher-enabled @refresherrefresh="pullDownRefresh" :refresher-triggered="isRefresh" refresher-background="transparent">
                    <view class="scroll-view-content">
                         <!-- 商品列表搜索 VIP4-->
                         <view class="goods-list-box  flex-wrap">
                              <waterfallsFlow  ref="WaterfallRef"   :keyIndex="actLabelId"  :wfList="goodsList" :updateNum="searchForm.page"></waterfallsFlow>
                         <!-- <waterfallsFlow ref="WaterfallRef"  :keyIndex="actLabelId"  :wfList="goodsList" :updateNum="searchForm.page"  ></waterfallsFlow> -->
                         <view class="flex-cn-cn" style="width: 100%;height: 60rpx;">
								<view v-if="canLoad && isLoading" class="bottom-message flex-cn-cn">加载中...</view>
								<view v-if="!canLoad && !isLoading" class="flex-cn-cn bottom-message" >
									<view class="line"></view>
									<text class="mar_l_10 mar_r_10">没有更多了</text>
									<view class="line"></view>
								</view>
							</view>
                         </view>
                    </view>
               </scroll-view>
          </view>
          <!-- 购物车图钉 -->
          <shopping-pushpins></shopping-pushpins>
          <!-- 选择规格弹窗 -->
          <block v-if="showSelectSku">
               <choose-sku :sku="sku" :goodsinfo="goods" goodsType="1" @close="closeSku"></choose-sku>
          </block>
     </qh-page-view>
</template>

<script>
const app = getApp().globalData;
export default {
     data () {
          return {
             
               isTop: true, // 用于标记是否在顶部
               labelList:[],
               defaultActLabelId:null,  //默认ID
               actLabelId: "", //选中的标签id
               goodsChecked:[],
               animations: [],
               animationIndex: null,
               indexes: [],
               isFocus: false,
               title: "",
               goodsList: [],
               isRefresh: false,
               isLoading: false,
               canLoad: true,
               firstLoad:true,
               searchForm: {
                    goods_name: "",
                    person1: "",
                    person2: "",
                    person3: "",
                    page: 1,
                    limit: 10,
               },
               showSelectSku: false,
               goods: {},
               sku: {},
          };
     },
     /**
      * @param {Object} options
      * name		分类名称
      * type		分类级别  1、2、3 不传默认为1
      * id		分类id
      */
     async onLoad (options) {
          await this.getLabelList()
          this.actLabelId = options.id
          await this.$onLaunched;
          if (options.search == 1) {
               this.$nextTick(() => {
                    this.isFocus = true;
               });
               this.title = "搜索商品";
          } else {
               this.title = options.name ? options.name : "商品列表";
               if (options.id) {
                    switch (options.type) {
                         case "2":
                              this.searchForm.person2 = options.id;
                              break;
                         case "3":
                              this.searchForm.person3 = options.id;
                              break;
                         default:
                              this.searchForm.person1 = options.id;
                              break;
                    }
               }
               this.searchData();
          }
     },
     computed: {
          headerStyle() {
               return `background-image: ${this.isTop ? 'url("https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/6620799d9589d4905.png")': 'none'}`
          },
          styleColor(){
               return `color: ${this.isTop ? '#fff' : '#000 '}`
          }
     },

     onShow (){
          if(this.$refs.WaterfallRef) {
               this.$refs.WaterfallRef.upDate()
          }
    },
     methods: {

   
          toSearchGoods() {
               console.log()
               uni.navigateTo({
               url: "/pages/mer/goods/search/search?search=1",
               });
          },
           //后退
          backHome() {
               uni.navigateBack();
          },
          //搜索
          async searchGoods(e) {
               this.actLabelId  = e.id
               this.title = e.name
               this.searchForm.page =1
               this.canLoad = true;
               this.defaultActLabelId = e.id
                this.getGoodsList();
          },

          //滚动监听
          onScroll(event) {
               const scrollTop = event.detail.scrollTop;
               this.isTop = scrollTop <= 40;
               // console.log( this.isTop   , ' this.isTop ')
          },


               //获取标签列表
          async getLabelList() {
               const { status, data } = await this.$request(
               "SmallProgramApi/ShiFu/getHomePageGoodLabel",
               { store_id: this.$store.mallStoreId }
               );
               if (status == 1) {
               this.labelList = data;
               if (data.length) {
                    this.$nextTick(() => {
                    this.$refs.labelRef && (this.$refs.labelRef.marginLeft = 0);
                    this.defaultActLabelId =  data[0].id 
                    this.actLabelId == undefined  ? this.actLabelId = data[0].id : this.actLabelId 
                    });
               }
               console.log(this.labelList, "获取标签列表");
               }
          },



          //查看商品详情
          toDetail (id) {
               uni.navigateTo({
                    url: "/pages/mer/goods/details/details?id=" + id,
               });
          },
          //下拉刷新
          async pullDownRefresh () {
               this.isRefresh = true;
               await this.searchData();
               await this.getLabelList()
               this.isRefresh = false;
          },
          async searchData () {
               this.canLoad = true;
               this.isLoading = false;
               this.searchForm.page = 1;
               await this.getGoodsList();
              
          },

          
          //关闭规格弹窗
          closeSku () {
               this.showSelectSku = false;
          },
          //添加商品到购物车
          async addToCar (index) {
               if (this.goodsList[index].attribute == 2) {
                    this.goods = {
                         ...this.goodsList[index],
                         goods_image: this.goodsList[index].path,
                         goods_num: 999,
                    };
                    this.showSelectSku = true;
               } else {
                    const res = await this.$mutations.setShoppingCar(
                         {
                              goods_id: this.goodsList[index].goods_id,
                              num: 1,
                         },
                         1
                    );
                    if (res) {
                         this.showSelectSku = false;
                    }
               }
          },
          //点击搜索
          search () {
               uni.navigateTo({
                    url: "../product/productList/productList?type=1",
               });
          },
          //获取商品
          getGoodsList () {
               return new Promise(async (resolve) => {
                    if (this.isLoading || !this.canLoad) return resolve(false);
                    this.isLoading = true;
                    this.searchForm = Object.assign(this.searchForm , {store_id:this.$store.mallStoreId , label_id:this.actLabelId })
                    const { status, data, message } = await this.$request(
                         "SmallProgramApi/ShiFu/getLabelGoodList",
                         this.searchForm
                    );


                    if (this.firstLoad) {
                         this.firstLoad = false;
                    }
                    if (status != 1)
                         return (
                              uni.showToast({
                                   title: message,
                                   icon: "none",
                              }) && resolve(false)
                         );
                         if (this.searchForm.page == 1) {
                              this.goodsList = [...data];
                         } else {
                              this.goodsList = [...this.goodsList, ...data];
                             
                         }

					if (!data.length) {
						this.canLoad = false;
					}
                    this.searchForm.page++;
                    // this.canLoad = this.goodsList.length == data ? false : true;

                    this.goodsList.forEach((item) => {
                    let matchedItem = this.$store.merShoppingGoodsList.find(
                              (el) => el.goods_id === item.id
                         );
                         if (matchedItem) {
                              item.num = matchedItem.num;
                         } else {
                              this.indexes = []
                              item.num = 0;
                         }
                    });
                         
                         this.isLoading = false;
                         resolve(true);
               });
          },


     },
};
</script>



<style lang="scss">

.fixed-header{
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     background-color: #ffffff;
     position: flex;
     top: 0;
     z-index: 10;
}
.bottom-message {
		color: #ccc;
		font-size: 24rpx;
		// background-color: #fff;
		width: 100%;
		padding: 10rpx 0;
	}

	.line {
		width: 40%;
		height: 1px;
		background-color: #ccc;
	}



.search-box {
     height: 102rpx;
     // padding: 12rpx 24rpx;
     // box-sizing: border-box;
     // box-shadow: 0 0 16rpx rgba(0, 0, 0, 0.05);
     z-index: 1;
   
          
     .search-content {
          height: 64rpx;
          width: 448rpx;
          padding: 0 0 0 24rpx;
          border: 2rpx solid var(--primary-color);
          border-radius: 34rpx;
          box-sizing: border-box;
          background-color: #ffffff;

          .search-icon {
               font-size: 28rpx;
               color: #999999;
          }

          .search-input {
               flex: 1;
               font-size: 28rpx;
               line-height: 48rpx;
               color: #333333;
               margin: 0 10rpx;
               height: 48rpx;
          }

          .search-btn {
               width: 124rpx;
               height: 100%;
               font-size: 28rpx;
               color: #ffffff;
               text-align: center;
               line-height: 48rpx;
               // background-color: var(--primary-color);
               border-radius: 32rpx;
               margin-right: -1rpx;
          }
     }
}

.scroll-view {
     background: #F0F2EE;
}


</style>
